<template>
  <div class="setting-spare-part" v-loading="loading">
    <!-- start 头部 -->
    <div class="setting-spare-part-header">
      <div class="setting-part-left">
        <p class="setting-back-btn" @click="back">
          <i class="iconfont icon-arrow-left"></i> {{$t('common.base.back')}}
        </p>
        <p class="setting-back-name">{{$t('task.detail.components.materialApply')}}</p>
      </div>    
      <base-button
        type="primary"
        native-type="submit"
        :disabled="pending"
        @event="onSubmit"
      >{{$t('common.base.save')}}</base-button>
    </div>
    <!-- end 头部 -->
    
    <!-- start content-->
    <div class="setting-spare-part-content">
      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.setting.taskAdditionalSetting.listShowFields')}}      
            <el-tooltip :content="$t('task.tip.materialApplyTip2')" placement="top" popper-class="card-tips-tooltip">
              <i class="iconfont icon-question"></i>
            </el-tooltip>
          </span>
          <span class="edit-column" @click="onEditColumn">{{$t('common.base.edit')}}</span>
        </div>
        <p class="setting-spare-column">
          <span v-for="field in fields" :key="field.fieldId">{{field.displayName}}</span>
        </p>
      </div>

      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip3')}}</span>
          <el-switch v-model="cardConfig.isInitAdd" class="setting-spare-switch"></el-switch>    
        </div>
        <p class="setting-spare-msg">{{$t('task.tip.materialApplyTip4')}}</p>
      </div>

      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip5')}}</span>
          <el-switch v-model="cardConfig.warrantyChange" class="setting-spare-switch"></el-switch>    
        </div>
        <div class="setting-spare-msg setting-spare-msg-role">
          <i18n path="task.tip.materialApplyTip6">
            <div place="role" class="setting-spare-msg-role-select" :class="isError ? 'setting-spare-msg-role-select-error' : ''">
              <el-select v-model="cardConfig.warrantyRoleList" @change="roleListChange" multiple :placeholder="$t('task.tip.allotRuleTip1')">
                <el-option :label="$t('task.taskTypes.allot.taskExecutor')" value="taskPrincipalPerson"></el-option>
                <el-option :label="$t('task.taskTypes.allot.taskSynergies')" value="taskSynergyPerson"></el-option>
              </el-select>
              <span v-if="isError" class="setting-spare-msg-role-error">
                {{$t('task.tip.allotRuleTip1')}}
              </span>
            </div>
          </i18n>
        </div>
      </div>

      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip7')}}</span>
          <el-switch v-model="cardConfig.isTaskOutRep" class="setting-spare-switch"></el-switch>    
        </div>
        <div class="setting-spare-msg setting-spare-msg-role">
          <i18n path="task.tip.materialApplyTip8">
            <div place="role" class="setting-spare-msg-role-select" :class="isError ? 'setting-spare-msg-role-select-error' : ''">
              <el-select v-model="cardConfig.roleList" @change="roleListChange" multiple :placeholder="$t('task.tip.allotRuleTip1')">
                <el-option :label="$t('task.taskTypes.allot.taskExecutor')" value="taskPrincipalPerson"></el-option>
                <el-option :label="$t('task.taskTypes.allot.taskSynergies')" value="taskSynergyPerson"></el-option>
              </el-select>
              <span v-if="isError" class="setting-spare-msg-role-error">
                {{$t('task.tip.allotRuleTip1')}}
              </span>
            </div>
          </i18n> 
        </div>
      </div>

      <!-- 允许系统推荐出库仓库 -->
      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{ $t('task.tip.materialApplyTip15') }}</span>
          <el-switch v-model="cardConfig.isRecommendWarehouse" class="setting-spare-switch"></el-switch>    
        </div>
        <div class="setting-spare-msg setting-spare-msg-role">
          <i18n path="task.tip.materialApplyTip16">
            <div place="warehouse1" class="setting-spare-msg-role-select" :class="isWarehouseError ? 'setting-spare-msg-role-select-error' : ''">
              <el-select v-model="cardConfig.recommendWarehouseType" :placeholder="$t('task.tip.materialApplyTip19')" clearable @change="changeWarehouse1">
                <el-option v-for="item in outboundOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <span v-if="isWarehouseError" class="setting-spare-msg-role-error">
                {{ $t('task.tip.materialApplyTip19') }}
              </span>
            </div>
            <div place="warehouse2" v-if="cardConfig.recommendWarehouseType === 'APPOINT'" class="setting-spare-msg-role-select" :class="isWarehouseError1 ? 'setting-spare-msg-role-select-error' : ''">
              <el-select v-model="cardConfig.appointRecommendWarehouse" :placeholder="$t('task.tip.materialApplyTip19')" clearable @change="changeWarehouse2">
                <el-option v-for="item in warehouseOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <span v-if="isWarehouseError1" class="setting-spare-msg-role-error">
                {{ $t('task.tip.materialApplyTip19') }}
              </span>
            </div>
          </i18n>
        </div>
      </div>

      <!-- 允许申领出库数量大于可用库存数量 -->
      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{ $t('task.tip.materialApplyTip17') }}</span>
          <el-switch v-model="cardConfig.allowGtInventory" class="setting-spare-switch"></el-switch>    
        </div>
        <p class="setting-spare-msg">{{ $t('task.tip.materialApplyTip18') }}</p>
      </div>

      <div v-if="cardConfig.isTaskOutRep" class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip9')}}</span>
          <el-switch v-model="cardConfig.selectWarehouse" class="setting-spare-switch"></el-switch>    
        </div>
        <p class="setting-spare-msg">{{$t('task.tip.materialApplyTip10')}}</p>
      </div>
      
      <div v-if="cardConfig.isTaskOutRep" class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip22')}}</span>
        </div>
        <div class="setting-spare-li-checkbox">
          <el-checkbox v-model="cardConfig.isOutRep2Person">
            <div>{{ $t('task.detail.components.applyToPersonalWarehouse') }}</div>
            <div class="setting-spare-msg">{{ $t('task.tip.materialApplyTip23') }}</div>
          </el-checkbox>
          <el-checkbox v-model="cardConfig.isOutRep2Task">
            <div>{{ $t('task.detail.components.applyToTask') }}</div>
            <div class="setting-spare-msg">{{ $t('task.tip.materialApplyTip24') }}</div>
          </el-checkbox>
        </div>
      </div>

      <div class="setting-spare-li">
        <div class="setting-spare-title">
          <span>{{$t('task.tip.materialApplyTip13')}}</span>
          <el-switch v-model="cardConfig.isLookRepertoryRecordInfo" class="setting-spare-switch"></el-switch>    
        </div>
        <p class="setting-spare-msg">{{$t('task.tip.materialApplyTip14')}}</p>
      </div>

    </div>
    <!-- end content-->
    <!--start 编辑列表显示字段 -->
    <editor-column-dialog ref="editorColumnDialog" @onSave="(value)=>onSaveSetSubmit(value)"  :fieldsOptions="fieldsOptions" :editSelectedData="fields"></editor-column-dialog>
    <!--end 编辑列表显示字段-->
  </div>
</template>

<script>
import taskMaterialApplyView from './taskMaterialApplyView';
export default taskMaterialApplyView;
</script>

<style lang="scss">
@import "./taskMaterialApplyView.scss";
</style>